<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="com.why.cachecloud.service.redis.enums.RedisAlertConfigEnum"%>
<%@page import="com.why.cachecloud.service.redis.enums.InstanceAlertCompareTypeEnum"%>
<%@page import="com.why.cachecloud.service.redis.enums.InstanceAlertCheckCycleEnum"%>
<%@ include file="/WEB-INF/jsp/manage/commons/taglibs.jsp"%>
<link rel="stylesheet" type="text/css" href="/resources/ace/css/cacheCloud-self.css"/>

<script type="text/javascript">

//查看实例是否存在
function checkInstanceExist(){
	var instanceHostPort = document.getElementById("instanceHostPort").value;
	if(instanceHostPort != ''){
		$.post(
			'/manage/instanceAlert/checkInstanceHostPort.json',
			{
				instanceHostPort: instanceHostPort,
			},
	        function(data){
				var success = data.status;
	            if(success==0){
	            		alert(data.message);
	            		document.getElementById("instanceHostPort").focus();
	            }
	        }
	     );
	}
}

function removeAlertConfig(id) {
	$.get(
		'/manage/instanceAlert/remove.json',
		{
			id: id
		},
        function(data){
			var status = data.status;
			if (status == 1) {
           		alert("删除成功!");
			} else {
           		alert("删除失败, msg: " + result.message);
			}
               window.location.reload();
        }
     );
}

function changeAlertConfig(id) {
	var alertValue = document.getElementById("alertValue" + id);
	var checkCycle = document.getElementById("checkCycle" + id);
	$.get(
		'/manage/instanceAlert/update.json',
		{
			id: id,
			alertValue: alertValue.value,
			checkCycle: checkCycle.value
		},
        function(data){
			var status = data.status;
			if (status == 1) {
				alert("修改成功！");
                window.location.reload();
			} else {
				alert("修改失败！" + data.message);
			}
			
        }
     );
}

function saveInstanceAlertConfig() {
	var alertConfig = document.getElementById("alertConfig");
	var alertValue = document.getElementById("alertValue");
	if (alertValue.value == ""){
		alert("请填写阈值");
		alertValue.focus();
		return false;
	}
	var compareType = document.getElementById("compareType");
	var checkCycle = document.getElementById("checkCycle");
	var instanceHostPort = document.getElementById("instanceHostPort");
	var type = 1;
	if (instanceHostPort.value != null && instanceHostPort.value != '') {
		type = 2;
	}
	$.get(
		'/manage/instanceAlert/add.json',
		{
			alertConfig: alertConfig.value,
			alertValue: alertValue.value,
			compareType: compareType.value,
			checkCycle: checkCycle.value,
			instanceHostPort: instanceHostPort.value,
			type: type
		},
        function(data){
			var status = data.status;
			if (status == 1) {
				alert("添加成功！");
			} else {
				alert("添加失败！" + data.message);
			}
            window.location.reload();
        }
     );
}

// 应用添加报警
function saveAppAlertConfig() {
    var alertConfig = document.getElementById("alertAppConfig");
    var alertValue = document.getElementById("alertAppValue");
    var appid = document.getElementById("appid");
    if (alertValue.value == ""){
        alert("请填写阈值");
        alertValue.focus();
        return false;
    }
	if(!appid.value) {
		alert("请填写阈值");
		appid.focus();
		return false;
	}
    var compareType = document.getElementById("compareAppType");
    var checkCycle = document.getElementById("checkAppCycle");

    $.get(
        '/manage/instanceAlert/addApp.json',
        {
            alertConfig: alertConfig.value,
            alertValue: alertValue.value,
            compareType: compareType.value,
            checkCycle: checkCycle.value,
            appid: appid.value
        },
        function(data){
            var status = data.status;
            if (status == 1) {
                alert("添加成功！");
            } else {
                alert("添加失败！" + data.message);
            }
            window.location.reload();
        }
    );
}
</script>

<div class="page-container">
	<div class="page-content">
		<div class="table-toolbar">
			<div class="btn-group">
				<button id="sample_editable_3_new" class="btn green" data-target="#changeWarnTypeModal" data-toggle="modal">
					添加系统告警 <i class="fa fa-plus"></i>
				</button>
			</div>
			<div class="btn-group">
				<button id="sample_editable_2_new" class="btn green" data-target="#addAppAlertModal" data-toggle="modal">
					添加应用报警项 <i class="fa fa-plus"></i>
				</button>
			</div>
			&nbsp;
			<div class="btn-group">
				<button id="sample_editable_1_new" class="btn green" data-target="#addInstanceAlertModal" data-toggle="modal">
					添加新实例报警项 <i class="fa fa-plus"></i>
				</button>
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div class="portlet box light-grey">
					<div class="portlet-title">
						<div class="caption">
							<i class="fa fa-globe"></i>
							系统告警:
						</div>
						<div class="tools">
							<a href="javascript:;" class="collapse"></a>
						</div>
					</div>

					<div class="portlet-body">
						<div class="table-toolbar">
							<table class="table table-striped cache-table table-hover" id="warnTableDataList">
								<thead>
								<tr>
									<th>id</th>
									<th>告警类型</th>
									<th>应用ID</th>
									<th>配置参数</th>
									<th>告警用户(1应用管理员5平台管理员9所有)</th>
									<th>告警限制时间(分钟)</th>
									<th>告警限制次数</th>
									<th>说明</th>
									<th>创建时间</th>
									<th>操作</th>
								</tr>
								</thead>
								<tbody>
								<c:forEach items="${warnConfigList}" var="config">
									<tr class="odd gradeX" data-id="${config.id}">
										<td>
											<span data-name="id">${config.id}</span>
										</td>
										<td>
											<span data-name="warnType">${config.warnType}</span>
										</td>
										<td>
											<span data-name="appId">${config.appId}</span>
										</td>
										<td>
											<span data-name="parameter">${config.parameter}</span>
										</td>
										<td>
											<span data-name="alertType">${config.alertType}</span>
										</td>
										<td>
											<span data-name="alertTime">${config.alertTime}</span>
										</td>
										<td>
											<span data-name="alertCount">${config.alertCount}</span>
										</td>
										<td>
											<span data-name="remark">${config.remark}</span>
										</td>
										<td>
<%--											<fmt:formatDate value="${config.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/>--%>
											${config.createTime}
										</td>
										<td>
											<button type="button" class="btn btn-info" onclick="changeWarnConfig(${config.id})">修改</button>
											<button type="button" class="btn btn-info" onclick="delWarnConfig(${config.id})">删除</button>
										</td>
									</tr>
								</c:forEach>
								</tbody>
							</table>
						</div>
					</div>
				</div>
				<!-- END TABLE PORTLET-->
			</div>
		</div>

		<div class="row">
			<div class="col-md-12">
				<div class="portlet box light-grey">
						<div class="portlet-title">
							<div class="caption">
								<i class="fa fa-globe"></i>
								全局实例报警项:
								&nbsp;
							</div>
							<div class="tools">
								<a href="javascript:;" class="collapse"></a>
							</div>
						</div>
						
						<div class="portlet-body">
	                        <div class="table-toolbar">
								<table class="table table-striped cache-table table-hover" id="tableDataList">
									<thead>
										<tr>
											<th>id</th>
											<th>配置名</th>
											<th>配置说明</th>
											<th>关系</th>
											<th>阀值</th>
											<th>周期</th>
											<th>最近检测时间</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<c:forEach items="${instanceAlertAllList}" var="config">
											<tr class="odd gradeX">
												<td>
													${config.id}
												</td>
												<td>
													${config.alertConfig}
												</td>
												<td>
													${config.configInfo}
												</td>
												<td>
													<c:forEach items="${instanceAlertCompareTypeEnumList}" var="instanceAlertCompareTypeEnum">
														<c:if test="${config.compareType == instanceAlertCompareTypeEnum.value}">${instanceAlertCompareTypeEnum.info}</c:if>
													</c:forEach>
												</td>
												<td>
													${config.alertValue}
												</td>				
												<td>
													<c:forEach items="${instanceAlertCheckCycleEnumList}" var="instanceAlertCheckCycleEnum">
														<c:if test="${config.checkCycle == instanceAlertCheckCycleEnum.value}">${instanceAlertCheckCycleEnum.info}</c:if>
													</c:forEach>
												</td>
												<td>
		                    							<fmt:formatDate value="${config.lastCheckTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
												</td>
												<td>
													<button type="button" class="btn btn-info" data-target="#changeInstanceAlertModal${config.id}" data-toggle="modal" href="#">修改</button>
			                    						<button type="button" class="btn btn-info" onclick="if(window.confirm('确认要清除id=${config.id}的配置?!')){removeAlertConfig('${config.id}');return true;}else{return false;}">删除</button>
												</td>
											</tr>
										</c:forEach>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<!-- END TABLE PORTLET-->
			</div>
		</div>
		
		<div class="row">
			<div class="col-md-12">
				<div class="portlet box light-grey">
						<div class="portlet-title">
							<div class="caption">
								<i class="fa fa-globe"></i>
								特殊实例报警:
								&nbsp;
							</div>
							<div class="tools">
								<a href="javascript:;" class="collapse"></a>
							</div>
						</div>
						
						<div class="portlet-body">
	                        <div class="table-toolbar">
								<table class="table table-striped cache-table table-hover" id="tableDataList">
									<thead>
										<tr>
											<th>id</th>
											<th>实例信息</th>
											<th>配置名</th>
											<th>配置说明</th>
											<th>关系</th>
											<th>阀值</th>
											<th>周期</th>
											<th>最近检测时间</th>
											<th>操作</th>
										</tr>
									</thead>
									<tbody>
										<c:forEach items="${instanceAlertSpecialList}" var="config">
											<tr class="odd gradeX">
												<td>
													${config.id}
												</td>
		                							<c:set var="instanceId" value="${config.instanceId}"/>
												<td>
													${config.instanceInfo.hostPort}
													<a target="_self" href="/admin/app/index?appId=${config.instanceInfo.appId}">(${config.instanceInfo.appId})</a>
												</td>
												<td>
													${config.alertConfig}
												</td>
												<td>
													${config.configInfo}
												</td>
												<td>
													<c:forEach items="${instanceAlertCompareTypeEnumList}" var="instanceAlertCompareTypeEnum">
														<c:if test="${config.compareType == instanceAlertCompareTypeEnum.value}">${instanceAlertCompareTypeEnum.info}</c:if>
													</c:forEach>
												</td>
												<td>
													${config.alertValue}
												</td>
												<td>
													<c:forEach items="${instanceAlertCheckCycleEnumList}" var="instanceAlertCheckCycleEnum">
														<c:if test="${config.checkCycle == instanceAlertCheckCycleEnum.value}">${instanceAlertCheckCycleEnum.info}</c:if>
													</c:forEach>
												</td>
												<td>
		                    							<fmt:formatDate value="${config.lastCheckTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
												</td>
												<td>
													<button type="button" class="btn btn-info" data-target="#changeInstanceAlertModal${config.id}" data-toggle="modal" href="#">修改</button>
			                    						<button type="button" class="btn btn-info" onclick="if(window.confirm('确认要清除id=${config.id}的配置?!')){removeAlertConfig('${config.id}');return true;}else{return false;}">删除</button>
												</td>
											</tr>
										</c:forEach>
									</tbody>
								</table>
							</div>
						</div>
					</div>
					<!-- END TABLE PORTLET-->
			</div>
		</div>
		
	</div>
</div>

<!-- 单实例报警项 -->
<div id="addInstanceAlertModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog">
		<div class="modal-content">
		
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 class="modal-title">添加实例报警项</h4>
			</div>
			
			<form class="form-horizontal form-bordered form-row-stripped">
				<div class="modal-body">
					<div class="row">
						<!-- 控件开始 -->
						<div class="col-md-12">
							<!-- form-body开始 -->
							<div class="form-body">
								<div class="form-group">
									<label class="control-label col-md-3">
										配置名:
									</label>
									<div class="col-md-5">
										<select name="alertConfig" id="alertConfig" class="form-control select2_category">
											<c:forEach items="${redisAlertConfigEnumList}" var="redisAlertConfig">
												<option value="${redisAlertConfig.value}">
													${redisAlertConfig.info}
												</option>
											</c:forEach>
										</select>
									</div>
								</div>
								
								<div class="form-group">
									<label class="control-label col-md-3">
										比较:
									</label>
									<div class="col-md-5">
										<select name="compareType" id="compareType" class="form-control select2_category">
											<c:forEach items="${instanceAlertCompareTypeEnumList}" var="instanceAlertCompareTypeEnum">
												<option value="${instanceAlertCompareTypeEnum.value}">
													${instanceAlertCompareTypeEnum.info}
												</option>
											</c:forEach>
										</select>
									</div>
								</div>
								
								
								<div class="form-group">
									<label class="control-label col-md-3">
										<font color='red'>*</font> 阀值:
									</label>
									<div class="col-md-5">
										<input type="text" name="alertValue" id="alertValue"
											class="form-control" />
									</div>
								</div>
								
								<div class="form-group">
									<label class="control-label col-md-3">
										实例:
									</label>
									<div class="col-md-5">
										<input type="text" name="instanceHostPort" id="instanceHostPort"
											class="form-control" placeholder="全部则为空,单个实例ip:port" onchange="checkInstanceExist()"/>
									</div>
								</div>
								
								<div class="form-group">
									<label class="control-label col-md-3">
										周期:
									</label>
									<div class="col-md-5">
										<select name="checkCycle" id="checkCycle" class="form-control select2_category">
											<c:forEach items="${instanceAlertCheckCycleEnumList}" var="instanceAlertCheckCycleEnum">
												<option value="${instanceAlertCheckCycleEnum.value}">
													${instanceAlertCheckCycleEnum.info}
												</option>
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<!-- form-body 结束 -->
						</div>
					</div>
				</div>
				
				<div class="modal-footer">
					<button type="button" data-dismiss="modal" class="btn" >Close</button>
					<button type="button" id="configBtn" class="btn red" onclick="saveInstanceAlertConfig()">Ok</button>
				</div>
			</form>
		</div>
	</div>
</div>

<!-- 应用报警项 -->
<div id="addAppAlertModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog">
		<div class="modal-content">

			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 class="modal-title">添加应用报警项</h4>
			</div>

			<form class="form-horizontal form-bordered form-row-stripped">
				<div class="modal-body">
					<div class="row">
						<!-- 控件开始 -->
						<div class="col-md-12">
							<!-- form-body开始 -->
							<div class="form-body">
								<div class="form-group">
									<label class="control-label col-md-3">
										配置名:
									</label>
									<div class="col-md-5">
										<select name="alertConfig" id="alertAppConfig" class="form-control select2_category">
											<c:forEach items="${redisAlertConfigEnumList}" var="redisAlertConfig">
												<option value="${redisAlertConfig.value}">
														${redisAlertConfig.info}
												</option>
											</c:forEach>
										</select>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-md-3">
										比较:
									</label>
									<div class="col-md-5">
										<select name="compareType" id="compareAppType" class="form-control select2_category">
											<c:forEach items="${instanceAlertCompareTypeEnumList}" var="instanceAlertCompareTypeEnum">
												<option value="${instanceAlertCompareTypeEnum.value}">
														${instanceAlertCompareTypeEnum.info}
												</option>
											</c:forEach>
										</select>
									</div>
								</div>


								<div class="form-group">
									<label class="control-label col-md-3">
										<font color='red'>*</font> 阀值:
									</label>
									<div class="col-md-5">
										<input type="text" name="alertValue" id="alertAppValue"
											   class="form-control" />
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-md-3">
										<font color='red'>*</font> 应用appid:
									</label>
									<div class="col-md-5">
										<input type="text" name="appid" id="appid"
											   class="form-control" placeholder="应用appid" onchange="checkAppExist()"/>
									</div>
								</div>

								<div class="form-group">
									<label class="control-label col-md-3">
										周期:
									</label>
									<div class="col-md-5">
										<select name="checkCycle" id="checkAppCycle" class="form-control select2_category">
											<c:forEach items="${instanceAlertCheckCycleEnumList}" var="instanceAlertCheckCycleEnum">
												<option value="${instanceAlertCheckCycleEnum.value}">
														${instanceAlertCheckCycleEnum.info}
												</option>
											</c:forEach>
										</select>
									</div>
								</div>
							</div>
							<!-- form-body 结束 -->
						</div>
					</div>
				</div>

				<div class="modal-footer">
					<button type="button" data-dismiss="modal" class="btn" >Close</button>
					<button type="button" id="configAppBtn" class="btn red" onclick="saveAppAlertConfig()">Ok</button>
				</div>
			</form>
		</div>
	</div>
</div>

<c:forEach items="${instanceAlertList}" var="config">
	<div id="changeInstanceAlertModal${config.id}" class="modal fade" tabindex="-1" data-width="400">
		<div class="modal-dialog">
			<div class="modal-content">
			
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
					<h4 class="modal-title">修改实例报警项</h4>
				</div>
				
				<form class="form-horizontal form-bordered form-row-stripped">
					<div class="modal-body">
						<div class="row">
							<!-- 控件开始 -->
							<div class="col-md-12">
								<!-- form-body开始 -->
								<div class="form-body">
									<div class="form-group">
										<label class="control-label col-md-3">
											阀值:
										</label>
										<div class="col-md-5">
											<input type="text" name="alertValue${config.id}" id="alertValue${config.id}" value="${config.alertValue}"
												class="form-control" />
										</div>
									</div>
									
									<div class="form-group">
										<label class="control-label col-md-3">
											周期:
										</label>
										<div class="col-md-5">
											<select name="checkCycle${config.id}" id="checkCycle${config.id}" class="form-control select2_category">
												<c:forEach items="${instanceAlertCheckCycleEnumList}" var="instanceAlertCheckCycleEnum">
													<option value="${instanceAlertCheckCycleEnum.value}" <c:if test="${config.checkCycle == instanceAlertCheckCycleEnum.value}">selected</c:if>>
														${instanceAlertCheckCycleEnum.info}
													</option>
												</c:forEach>
											</select>
										</div>
									</div>
								</div>
								<!-- form-body 结束 -->
							</div>
						</div>
					</div>
					
					<div class="modal-footer">
						<button type="button" data-dismiss="modal" class="btn" >Close</button>
						<button type="button" id="configBtn${config.id}" class="btn red" onclick="changeAlertConfig('${config.id}')">Ok</button>
					</div>
				</form>
			</div>
		</div>
	</div>
</c:forEach>
<div id="changeWarnTypeModal" class="modal fade" tabindex="-1" data-width="400">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
				<h4 class="modal-title">修改系统告警</h4>
			</div>

			<form class="form-horizontal form-bordered form-row-stripped" id="changeWarnTypeForm">
				<input type="hidden" name="id" value="0" class="form-control" />
				<div class="modal-body">
					<div class="row">
						<!-- 控件开始 -->
						<div class="col-md-12">
							<!-- form-body开始 -->
							<div class="form-body">
								<div class="form-group">
									<label class="control-label col-md-3">告警类型:</label>
									<div class="col-md-5"><input type="text" name="warnType" class="form-control" /></div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">应用ID(0全局):</label>
									<div class="col-md-5"><input type="text" name="appId" class="form-control" /></div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">告警限制时间:</label>
									<div class="col-md-5"><input type="text" name="alertTime" class="form-control" /></div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">告警限制次数:</label>
									<div class="col-md-5"><input type="text" name="alertCount" class="form-control" /></div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">告警用户类型<br/>(1应用管理员5平台管理员9所有):</label>
									<div class="col-md-5"><input type="text" name="alertType" class="form-control" /></div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">参数:</label>
									<div class="col-md-5"><input type="text" name="parameter" class="form-control" /></div>
								</div>
								<div class="form-group">
									<label class="control-label col-md-3">说明:</label>
									<div class="col-md-5"><input type="text" name="remark" class="form-control" /></div>
								</div>
							</div>
							<!-- form-body 结束 -->
						</div>
					</div>
				</div>

				<div class="modal-footer">
					<button type="button" data-dismiss="modal" class="btn" >Close</button>
					<button type="button" class="btn red" onclick="saveWarnConfig()">Ok</button>
				</div>
			</form>
		</div>
	</div>
</div>

<script type="text/javascript">
	function changeWarnConfig(id) {
		if(id > 0){
			const obj = {};
			const spanArr = $('#warnTableDataList > tbody > tr[data-id="' + id + '"] > td > span');
			for (var i = 0; i < spanArr.length; i++) {
				let $1 = $(spanArr[i]);
				obj[$1.attr("data-name")]=$1.text();
			}
			console.info(obj)
			const inpArr =$('#changeWarnTypeModal  input');
			for (var i = 0; i < inpArr.length; i++) {
				let $1 = $(inpArr[i]);
				$1.val(obj[$1.attr('name')])
			}
		}
		$('#changeWarnTypeModal').modal('show');
	}

	function saveWarnConfig() {
		const obj = $('#changeWarnTypeForm').serializeJson();
		if(obj['warnType'] == ''){
			alert('告警类型不能为空')
			return
		}
		if(obj['appId'] == ''){
			alert('应用ID不能为空')
			return
		}
		if(obj['alertTime'] == ''){
			alert('告警限制时间不能为空')
			return
		}
		if(obj['alertCount'] == ''){
			alert('告警限制次数不能为空')
			return
		}
		if(obj['alertType'] == ''){
			alert('告警用户类型不能为空')
			return
		}
		if(obj['remark'] == ''){
			alert('说明不能为空')
			return
		}

		$.ajax({
			type: 'post',
			url: '/manage/instanceAlert/warnType.json',
			contentType: 'application/json',
			data: JSON.stringify(obj),
			dataType: 'json',
			success: function (data) {
				var status = data.status;
				if (status == 1) {
					alert("操作成功！");
					window.location.reload();
				} else {
					alert("操作失败！" + data.message);
				}
			}
		})

	}

	function delWarnConfig(id) {
		if (!window.confirm('确认要清除id=' + id + '的配置?!')) {
			return false;
		}
		const obj = {id: id}
		$.ajax({
			type: 'delete',
			url: '/manage/instanceAlert/warnType',
			contentType: 'application/json',
			data: JSON.stringify(obj),
			dataType: 'json',
			success: function (data) {
				var status = data.status;
				if (status == 1) {
					alert("操作成功！");
					window.location.reload();
				} else {
					alert("操作失败！" + data.message);
				}
			}
		})
		return true;
	}
</script>